<template>
<!-- 查看产品的已派工情况 -->
  <el-dialog width="1200px" :close-on-click-modal="false" :title="title" @close="close" :visible.sync="visible" append-to-body class="look">
    <!--
    <LookDetail></LookDetail>
    -->
    <layout class="no-padding h-100percent" :search="false" :operation="false">
      <template slot="content">
        <el-collapse accordion @change="activeChange" v-model="activeNames">
          <template>
            <el-collapse-item v-for="item in dispatchList" :key="item.dispatchFormId" :name="item.dispatchFormId">
              <template slot="title">
                <div class="flex justify-content-center">
                  <div class="w150">
                    <span class="fontSize14 bold">派工单号：</span>{{ item.dispatchFormNumber }} 
                  </div>
                  <div class="w120">
                    <span class="pl15 fontSize14 bold">派工数量：</span>{{ item.dispatchNumber }}
                  </div>
                  <div class="w200">
                    <span class="pl15 fontSize14 bold">派工时间：</span>{{ item.createTime }}
                  </div> 
                  <div class="w120">
                    <span class="pl15 fontSize14 bold">完工数量：</span>{{ item.finishedNumber }}
                  </div>
                  <div class="w200">
                    <span class="pl15 fontSize14 bold">完工时间：</span>{{ item.finishTime }}
                  </div> 
                  <div class="w125">
                    <span class="pl15 fontSize14 bold">状态：</span>{{ item.formState }}
                  </div>
                  <div class="w125">
                    <span class="pl15 fontSize14 bold">清整方式：</span>{{ item.cleanBySelf ? '自清整' : '专人清整' }}
                  </div>
                </div>
              </template>
                <!-- <div class="w-100percent bold bg-lightGray mb5">基础信息</div>
                <el-table border stripe :data="basic"  class="mb10 text-black">
                  <el-table-column prop="noticeNumber" label="通知单号" align="center" width="120" v-if="haveNotice"></el-table-column>
                  <el-table-column prop="workingNumber" label="产品工号" align="center" width="120"></el-table-column>
                  <el-table-column prop="drawingNumber" label="图号" align="center" width="120"></el-table-column>
                  <el-table-column prop="productName" label="产品名称" align="center" width="120"></el-table-column>
                  <el-table-column prop="createTime" label="下单日期" align="center" width="120"></el-table-column>
                  <el-table-column prop="finishTime" label="交货日期" align="center" min-width="120"></el-table-column>
                </el-table> -->
                <!-- <div label="派工单" class="w-100percent bold bg-lightGray mb5">派工单</div> -->

                <el-table height="70%" border stripe class="mb10" :data="product" row-key="sid" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                  <el-table-column prop="sequenceNumber" label="工序号" align="right" width="80"></el-table-column>
                  <el-table-column prop="processName" label="工序名称" align="center" width="120"></el-table-column>
                  <el-table-column prop="department" label="部门" align="center" width="120"></el-table-column>
                  <el-table-column prop="dispatchNumber" label="工序数量" align="center" width="120"></el-table-column>
                  <el-table-column prop="single" label="单双机" align="center" min-width="100">
                    <template slot-scope="scope">
                      <div v-if="scope.row.department == '加工'">{{ scope.row.single ? '单机' : '双机' }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="equipment" label="设备" align="center" width="120"></el-table-column>
                  <el-table-column prop="quotaHour" label="定额工时" align="center" width="120"></el-table-column>
                  <el-table-column prop="debugHour" label="调试工时" align="center" width="120"></el-table-column>
                  <el-table-column prop="workerName" label="指派人姓名" align="center" width="120"></el-table-column>
                  <el-table-column prop="workerNumber" label="派工数量" align="center" width="120"></el-table-column>
                  <el-table-column prop="realWorkHour" label="实动工时" align="center" width="120"></el-table-column>
                  <el-table-column prop="numberQualified" label="合格" align="center" width="120"></el-table-column>
                  <el-table-column prop="numberPending" label="待处理" align="center" width="120"></el-table-column>
                  <el-table-column prop="numberWasteIndustrial" label="工废" align="center" width="120"></el-table-column>
                  <el-table-column prop="numberWasteMaterial" label="废料" align="center" width="120"></el-table-column>
                  <el-table-column prop="numberRework" label="返工" align="center" width="120"></el-table-column>
                  <el-table-column prop="processstate" label="质检确认" align="center" width="120"></el-table-column>
                </el-table>
            </el-collapse-item>
          </template>
        </el-collapse>
        <no-data placeholder="这里还没有派工单，快去添加吧~" v-if="dispatchList.length == 0"></no-data>
      </template>
    </layout>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import { getDispatchDetail } from '@/api/dispatch' // 获取产品上的设计工艺版本
import { Notification, Message } from 'element-ui'

const vuexDispatch = namespace('ThreeDispatch')

@Component({
  components: {
    Layout
  }
})
export default class LookDetail extends Vue {

  visible: boolean = false
  title: string = '查看信息'

  product: any[] = []

  basic: any[] = [
    {
      id: '',
      noticeNumber: '23ehjkwel',
      workingNumber: '',
      drawingNumber: '',
      productName: '',
      createTime: '',
      finishTime: ''
    }
  ]

  dispatchList: Array<any> = []
  activeNames:string = ""
  haveNotice: boolean = false

  //折叠面板
  activeChange(id: any) {
    if(id) {
      let index = this.dispatchList.findIndex(item => {
        return item.dispatchFormId == id
      })
      this.product = this.dispatchList[index].processList
    }
  }
  resetSidDispatch() {
    this.dispatchList = this.dispatchList.map(dItem => {
      dItem.processList = dItem.processList.map((item, index) => {
        if (item.children && item.children.length) {
          item.children = item.children.map((cItem, cIndex) => {
            if (cItem.children) {
              cItem.children = cItem.children.map((wItem, wIndex) => {
                wItem.sid = 'c' + ';' + index + ';' + cIndex + ';' + wIndex
                return wItem
              })
            }
            cItem.sid = 'b' + ';' + index + ';' + cIndex
            return cItem
          })
        } else {
          this.$delete(item, 'children')
        }
        item.sid = 'a'+';'+index
        return item
      })
      return dItem
    })
    console.log('dispatch', this.dispatchList)
  }

  async open(pId, product, noticeInfo) {
    if(noticeInfo) {
      this.haveNotice = true
    } else {
      this.haveNotice = false
    }
    this.basic[0].noticeNumber = noticeInfo.noticeNumber
    this.basic[0].workingNumber = noticeInfo.workingNumber
    this.basic[0].drawingNumber = product.drawingNumber
    this.basic[0].productName = product.productName
    this.basic[0].createTime = product.createTime
    this.basic[0].finishTime = product.deliveryDate
    let res = await getDispatchDetail({ producingId: pId }).catch(err => {
      Notification.error(err)
    })
    if (res) {
      this.dispatchList = res.data
      this.resetSidDispatch()
    }
    this.visible = true
  }
  close() {
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
</style>